<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-row>
          <el-col>
            <el-input
              class="input"
              v-model="input1"
              size="small"
              placeholder="请输入学号"
            />
          </el-col>
          <el-col>
            <el-button class="button" type="text" @click="search"
              >搜索</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-upload
              ref="upload"
              action=""
              :http-request="uploadPersonFile"
              :auto-upload="false"
            >
              <template #trigger>
                <el-button type="primary">选择模板文件</el-button>
              </template>
              <el-button type="success" @click="submitUpload">
                批量上传学生成绩
              </el-button>
            </el-upload>
          </el-col>
        </el-row>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="id"
        width="150"
        :sortable="{ custom }"
      />
      <el-table-column
        fixed
        prop="studentId"
        label="学号"
        width="150"
        :sortable="{ custom }"
      />
      
      <el-table-column
        prop="year"
        label="年份"
        width="120"
        :sortable="{ custom }"
      />
      <el-table-column
        prop="subject"
        label="科目"
        width="120"
        :sortable="{ custom }"
      />
      <el-table-column
        prop="grade"
        label="成绩"
        width="120"
        :sortable="{ custom }"
      />
      <el-table-column
        prop="dengji"
        label="等级"
        width="120"
        :sortable="{ custom }"
      />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="update(scope.row)"
            >编辑</el-button
          >
          <el-dialog v-model="dialogFormVisible" title="学生成绩更新">
            <el-form :model="form">
              <el-form-item label="id" :label-width="formLabelWidth">
                <el-input v-model="form.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="学号" :label-width="formLabelWidth">
                <el-input v-model="form.studentId" disabled></el-input>
              </el-form-item>
              <el-form-item label="年份" :label-width="formLabelWidth">
                <el-input v-model="form.year" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="科目" :label-width="formLabelWidth">
                <el-input v-model="form.subject" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="成绩" :label-width="formLabelWidth">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="等级" :label-width="formLabelWidth">
                <el-input v-model="form.dengji" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateOK">确认</el-button>
              </span>
            </template>
          </el-dialog>
          <el-button type="text" size="small" @click="deletebyID(scope.row)"
            >删除</el-button
          >
          <el-dialog
            v-model="dialogVisible"
            title="Tips"
            width="30%"
            :before-close="handleClose"
          >
            <span>确定删除吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="deleteOK">确定</el-button>
              </span>
            </template>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      input1: "",
      form: {
        id: "",
        studentId: "",
        year:"",
        subject:"",
        grade: "",
        dengji: "",
      },
      dialogFormVisible: false,
      dialogVisible: false,
      deleteid: "",
      message: "",
    };
  },
  mounted() {
    this.searchall();
  },
  methods: {
    uploadPersonFile(param) {
      const that = this;
      let formData = new FormData();
      formData.append("file", param.file);
      this.axios
        .post("/addgrades", formData, {
          "Content-Type": "multipart/form-data",
        })
        .then(function (response) {
          // console.log(response)
          if (response.data == "sucess") {
            alert("添加成功");
          } else {
            alert(response.data);
          }
          that.searchall();
        })
        .catch((error) => {
          alert(error);
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    deleteOK() {
      const that = this;
      this.axios
        .get("/deletestudent", {
          params: { key1: this.deleteid },
        })
        .then(function (response) {
          //  console.log(response)
          that.searchall();
          that.dialogVisible = false;
        });
    },
    deletebyID(row) {
      this.dialogVisible = true;
      this.deleteid = row.id;
    },
    searchall() {
      const that = this;

      this.axios.get("/getAllGrades").then(function (response) {
        that.tableData = response.data;
      });
    },
    search() {
      const that = this;
      console.log(that);
      this.axios
        .get("/getStudents", {
          params: { key1: this.input1 },
        })
        .then(function (response) {
          that.tableData = response.data;
        });
    },
    update(row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    updateOK() {
      const that = this;
      this.axios
        .get("/updateGrade", {
          params: {
            key1: this.form.id,
            key2: this.form.name,
            key3: this.form.genda,
            key4: this.form.level,
            key5: this.form.depart,
            key6: this.form.ability,
            key7: this.form.grade,
            key8: this.form.dengji,
          },
        })
        .then(function (response) {
          //console.log(response)
          that.searchall();
          that.dialogFormVisible = false;
        });
    },
  },
};
</script>

<style>
.input {
  width: 150px;
}
</style>
